<!DOCTYPE html>
<html lang="zh-CN">
<head lang="en">
    <meta charset="UTF-8">
    <title>图片预加载之无序加载</title>
    <style>
        html,body{
            height: 100%;
        }
        a{
            text-decoration: none;
        }
        .box{
            text-align: center;
        }
        .btn{
            display: inline-block;
            height: 30px;
            line-height: 30px;
            border: 1px solid #ccc;
            background-color: #fff;
            padding: 0 10px;
            margin-right: 50px;
            color: #333;
        }
        .btn:hover{
            background-color: #eee;
        }
        .loading{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #eee;
            text-align: center;
            font-size: 30px;
        }
        .progress{
            margin-top: 300px;
        }
    </style>
</head>
<body>
<div class="box">
    <img height="580" id="img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521646491406&di=1bcfd6c79e554986908922305bded4f1&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dpixel_huitu%252C0%252C0%252C294%252C40%2Fsign%3Dad3ada3d3f9b033b3885f49a7cb653bf%2Fcaef76094b36acaf57cd51c577d98d1001e99cde.jpg" />
    <p>
        <a href="javascript:;" class="btn" data-control="prev">上一页</a>
        <a href="javascript:;" class="btn" data-control="next">下一页</a>
    </p>
</div>
<div class="loading">
    <p class="progress">0%</p>
</div>
<script type="text/javascript" src="./js/jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="./js/preload.js"></script>
<script>
    var imgs = [
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521646491405&di=9a9f0650cad3d323df457d4c3440b535&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dpixel_huitu%252C0%252C0%252C294%252C40%2Fsign%3D4ad93f1631292df583cea455d549390c%2F960a304e251f95ca0fff688fc2177f3e67095285.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521646491404&di=16d4fd7f6dd3b7fca890aa2035746568&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F4034970a304e251f562f38d0ac86c9177f3e533a.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521646491403&di=4b218cd0e00f0646069a1d8dfbd3d65f&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dpixel_huitu%252C0%252C0%252C294%252C40%2Fsign%3Dbc617fdb69d9f2d3341c2cafc094ef7f%2Ff31fbe096b63f624acf579398c44ebf81a4ca364.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521646491402&di=24ed5a59dfeb36df7df79e543f2b271a&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dpixel_huitu%252C0%252C0%252C294%252C40%2Fsign%3D26c0f81f66224f4a43947b53608ff53e%2Fc8ea15ce36d3d539223b81fa3187e950352ab081.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521646491398&di=a29c6d4a891f6d02d79b13b8ab9d4c6c&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dpixel_huitu%252C0%252C0%252C294%252C40%2Fsign%3Db3f1ac1b9bef76c6c4dff36bf46e9896%2Fcdbf6c81800a19d8ea12fa3f38fa828ba61e46f2.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521646785271&di=3c7515d87ff099dba4705aca97b6fed1&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dpixel_huitu%252C0%252C0%252C294%252C40%2Fsign%3Dd63899ad4d2309f7f362a5521b76699f%2Fd439b6003af33a8770228c23cd5c10385343b5b8.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521646785265&di=96121620fd5e2dec26023907217004b5&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dpixel_huitu%252C0%252C0%252C294%252C40%2Fsign%3De0dcc14673f0f736ccf34441632dd675%2F86d6277f9e2f07086380dd39e224b899a901f206.jpg'
    ];
    var index = 0,
        len = imgs.length;

    var $progress = $('.progress');

    $.preload(imgs,{
        each : function (count) {
            $progress.html(Math.round((count + 1)/len *100) + '%');//每一次更新下加载进度
        },
        all : function () {
            $('.loading').hide();
            document.title = '1/' + len;
        }
    });

    $('.btn').on('click',function(){
        if( 'prev' === $(this).data('control')){ //上一张
            index = Math.max(0, --index);
        }else{//下一张
            index = Math.min(len - 1, ++index);
        }
        document.title = (index + 1) + '/' +len;
        $('#img').attr('src',imgs[index]);
    })

</script>
</body>
</html>